<template>
<div class="app-container">
  <div class="">
    <div slot="header" class="clearfix job-tab-header">
      <span>角色维护</span>
    </div>
    <div>
      <el-form :rules="rules" ref="targetForm" :model="temp" label-width="120px" label-position='right' size="small">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="temp.name" style="width:20%"></el-input>
        </el-form-item>
        <el-form-item label="角色代码">
          <el-input v-model="temp.code" style="width:20%"></el-input>
        </el-form-item>
        <el-form-item label="是否内置角色"  prop="isInner">
          <el-select v-model="temp.isInner" clearable>
            <el-option v-for="item in  isInnerOption" :key="item.key" :label="item.display_name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="角色状态" prop="status">
          <el-select v-model="temp.status" clearable>
            <el-option v-for="item in  statusOptions" :key="item.key" :label="item.display_name" :value="item.key">
            </el-option>
          </el-select>
        </el-form-item>
        <!--<el-form-item label="所属子系统" prop="subsysid">-->
          <!--<el-select v-model="temp.subsysid" clearable @focus="editSubSystemsOptions">-->
            <!--<el-option v-for="item in subSystemsOptions" :key="item.id" :label="item.name" :value="item.id">-->
            <!--</el-option>-->
          <!--</el-select>-->
        <!--</el-form-item>-->
      </el-form>
      <el-row :gutter="5" style="border-top:1px solid #e6e6e6; padding-top:20px;">
        <el-col style="text-align: right;">
          <el-button size="small" class="filter-item" type="primary" @click="saveData">保 存</el-button>
          <el-button size="small" class="filter-item" type="primary" @click="closeSelf">关 闭</el-button>
        </el-col>
      </el-row>
    </div>
  </div>
</div>
</template>

<script>
import {
  insertItem,
  selectSysSubsys
} from '@/api/systemManage/roleManagementEdit'
import {
  statusOptions,
  isInnerOption
} from '@/utils/allOptions'
export default {
  name: 'newRole',
  data() {
    return {
      // -------Options-----------
      statusOptions,
      isInnerOption,
      // -------Options-----------
      subSystemsOptions: [],
      temp: {
        name: '',
        validType: '',
        isInner: '',
        code: ''
      },
      rules: {
        name: [{
          required: true,
          message: '请输入角色名称',
          trigger: 'blur'
        },
        {
          min: 0,
          max: 100,
          message: '长度在 0 到 100 个字符',
          trigger: 'blur'
        },
        {
          max: 100,
          message: '最大 100 个字符',
          trigger: 'blur'
        }
        ],
        status: [{
          required: true,
          message: '请选择是否有效',
          trigger: 'blur'
        }],
        isInner: [{
          required: true,
          message: '请选择是否内置角色',
          trigger: 'blur'
        }]
      }
    }
  },
  methods: {
    editSubSystemsOptions() {
      const query = {
        sort: [{
          direction: 'ASC',
          property: 'id'
        }]
      }
      selectSysSubsys(query).then(response => {
        const records = response.data.data.records
        if (response.data.data.count > 0) {
          this.subSystemsOptions = []
          for (const item of records) {
            const input = {}
            input.id = item.id
            input.name = item.name
            this.subSystemsOptions.push(input)
          }
        }
      })
    },
    saveData() {
      this.$refs.targetForm.validate(valid => {
        if (valid) {
          this.temp.orgId = this.$route.params.id
          insertItem(this.temp).then(() => {
            this.$notify({
              title: '成功',
              message: '创建成功',
              type: 'success',
              duration: 2000
            })
            this.$router.push({ name: 'roleManagement' })
          })
        }
      })
    },
    closeSelf() {
      this.$router.push({ name: 'roleManagement' })
    }
  }
}
</script>

